<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <!-- 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
    <form action="/" class="search-from">
      <!-- 输入框 -->
      <!-- 双向绑定搜索框里输入的值 -->
      <!-- show-action 是否显示取消按钮 -->
      <!-- 鼠标聚焦时，搜索结果不显示 -->
      <van-search
        v-model="searchText"
        show-action
        shape="round"
        background="#2892ff"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isResultShow = false"
      />
    </form>
    <!-- 搜索栏 / -->

    <!-- 搜索结果 -->
    <search-result v-if="isResultShow" :search-text="searchText" />
    <!-- 搜索结果 / -->

    <!-- 搜索建议 -->
    <search-suggestion
      @search="onSearch"
      v-else-if="searchText"
      :search-text="searchText"
    />
    <!-- 搜索建议 / -->

    <!-- 搜索历史纪录 -->
    <search-history
      v-else
      :search-historys="searchHistorys"
      @clear-search-historys="searchHistorys = []"
      @search="onSearch"
    />
    <!-- 搜索历史纪录 / -->
  </div>
</template>

<script>
import searchHistory from './components/search-history'
import searchSuggestion from './components/search-suggestion'
import searchResult from './components/search-result'
// 在本地存储里备份一下
import { setItem, getItem } from '@/utils/storage'

export default {
  name: 'SearchIndex',
  data () {
    return {
      // value: '',
      searchText: '',
      isResultShow: false, // 控制搜索结果的显示状态，默认不显示
      searchHistorys: [], // 搜索的历史纪录数据
      searchHistories: getItem('TOUTIAO_SEARCH_HISTORY') || [] // 存储历史记录
    }
  },
  // 数据持久化
  // 监听数据的变化
  watch: {
    // 完整版 支持更多的配置和方法
    // searchHistorys: {
    //    handler () {}
    // }
    // 简写
    searchHistorys (value) {
      // console.log(111)
      // 同步搜索数据到本地
      setItem('TOUTIAO_SEARCH_HISTORY', value)
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 鼠标点击和按回车键就会触发事件--完成搜索，显示结果
    // 并把搜索框中的值传进来
    onSearch (val) {
      // console.log(val)
      this.isResultShow = true // 显示搜索结果

      // 储存搜索历史纪录
      // 要求：1.不要有重复历史纪录； 2.最新的在在前面
      const index = this.searchHistorys.indexOf(val)
      // 不等于-1 就代表数组里面有重复的，删除该重复的索引号所对应的数据
      if (index !== -1) {
        this.searchHistorys.splice(index, 1)
      }
      // 把搜索框输入的值从前面插入数组
      this.searchHistorys.unshift(val)

      this.searchText = val // 搜索框中的值 等于鼠标点击 text 的值
    },
    // 点击取消就会触发该事件
    onCancel () {
      this.$router.back()
    }
  },
  // 接收子组件
  components: {
    searchHistory,
    searchSuggestion,
    searchResult
  }
}
</script>

<style scoped lang="less">
.search-container {
  padding-top: 108px;

  .van-search__action {
    color: white;
  }

  .search-from {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
